<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>登录-梦幻空间站</title>
<link rel="icon name" href="{$site_info.site_icon}">
<link rel="stylesheet" href="__CBTCSS__/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
html, body { height: 100%; }
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>
</head>

<body class="text-center">

<form action="{:url('login/login')}" class="form-signin" id="login_form_list" method="post" role="from" enctype="multipart/form-data">
  <a href="/"><img class="mb-4" src="/static/img/logo.png" alt="" width="82" height="82"></a>
  <h1 class="h3 mb-3 font-weight-normal">{$site_info.site_name}</h1>
  <p>用户登录</p>

  <input type="text" class="form-control" placeholder="用户名 / 邮箱" name="uname" required autofocus>
  <input type="text" class="form-control" placeholder="密码【可空】" name="upass">
  <p class="text-left my-2 pl-2">或者</p>
  <div class="input-group my-2">
    <input type="text" class="form-control" name="email_captcha" placeholder="邮件验证码">
    <div class="input-group-append">
      <button class="btn btn-outline-info" type="button" id="send_mycaptcha" onclick="send_captcha()">发送</button>
    </div>
  </div>

  {if $frequency < 2}
  <div class="card mb-2" style="height:108px;">
    <img src="/login/verify" alt="captcha" onclick='this.src="/login/verify.html?"+Math.random();' />
    <div class="card-body p-0">
      <input type="text" class="form-control" placeholder="验证码" name="captcha">
    </div>
  </div>
  {/if}

  <button class="btn btn-lg btn-primary btn-block my-3" type="button" onclick="login()">登录</button>
  <div class="checkbox my-2">
    <label class="float-left">
      <input type="checkbox" value="rememdme" name="rememdme" checked> 记住我
    </label>
    <label class="float-right font-weight-lighter">
      <abbr><a href="{:url('login/register')}">没有账户？立即注册</a></abbr>
    </label>
    <div class="clearfix"></div>
  </div>
  <p class="my-2 text-muted">Copyright © 2019-2020 {$site_info.site_name}</p>
</form>





<script src="__CBTCSS__/jquery/3.4.1/jquery.min.js"></script>
<script src="__CBTCSS__/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="__CBTCSS__/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/main/jqueryMy/css/jquery.my-message.1.1.css" />
<script type="text/javascript" src="/static/main/jqueryMy/js/jquery.my-message.1.1.js"></script>
<script>
// ***************提示浮动框***************
var message = new MyMessage.message({
  /*默认参数，下面为默认项*/
  iconFontSize: "32px",    //图标大小,默认为20px
  messageFontSize: "24px", //信息字体大小,默认为12px
  showTime: 4000,          //消失时间,默认为3000
  align: "center",         //显示的位置类型center,right,left
  positions: {             //放置信息距离周边的距离,默认为10px
    top:   "20px",
    bottom:"10px",
    right: "10px",
    left:  "10px",
  },
});





// ***************工具提示框***************
$(document).ready(function(e){
  $('[data-toggle="tooltip"]').tooltip();
});





// ***************发送邮件验证码***************
function send_captcha(){
  $email = $("input[name='uname']").val();
  if($email != ''){
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
    if (!reg.test($email)){
      message.add("邮箱格式不正确，请重新填写!","error");
      return false;
    }
  }else{
    message.add("邮箱不能为空","error");
    return false;
  }
  $btn_html = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>发送中';
  $("#send_mycaptcha").html($btn_html);
  $.post("/login/send_login_email_captcha",
  {
    email : $email,
  },
  function(data,status){
    if(data.state == 'success'){
      var i = 25;
      function wait() {
        if (i > 0) {
          i--;
          $("#send_mycaptcha").attr('disabled',true);
          $("#send_mycaptcha").html('已发送(' + i + ')');
        } else {
          clearInterval(iCount);
          $("#send_mycaptcha").attr('disabled',false);
          $("#send_mycaptcha").html('发送');
        }
      }
      var iCount = setInterval(wait, 1000);
    }else{
      $("#send_mycaptcha").html('发送');
      message.add(data.info,"warning");
    }
  });
}





// ***************提交登录信息***************
function login(){
  // 获取要提交的信息
  $uname = $("input[name='uname']").val();
  $upass = $("input[name='upass']").val();
  $ecapt = $("input[name='email_captcha']").val();
  $captc = $("input[name='captcha']").val();
  $readm = $("input[name='rememdme']").is(':checked');
  if($readm) $readm=1; else $readm=0;
  if(!$captc){
    $captc = '';
  }
  // 登录信息提交
  $.post("{:url('login/login')}",
  {
    uname : $uname,
    upass : $upass,
    ecapt : $ecapt,
    captc : $captc,
    readm : $readm,
  },
  function(data,status){
    if(data.state=='success'){
      message.add(data.info,'success');
      setTimeout(function(){window.location.href="{:url('/index/blog')}"},900);
    }else{
      var info = data['info'];
      for( var key in info ){
        message.add(info[key],'warning');
      }
      $("img[alt='captcha']").click();
      if(data.state=='refresh'){
        $ocl = 'this.src="/login/verify.html?"+Math.random();';
        $captcha = '<div class="card mb-2" style="height:108px;"><img src="/login/verify" alt="captcha" onclick='+$ocl+' /><div class="card-body p-0"><input type="text" class="form-control" placeholder="验证码" name="captcha"></div></div>';
        $("button[onclick='login()']").before($captcha);
      }
    }
  });
}
</script>
</body>
</html>